import { articleGetArticleDetailService } from "@/api/article"
import { NavBar } from "antd-mobile"
import { useEffect, useState } from "react"
import { useNavigate, useSearchParams } from "react-router-dom"



const Detail = () => {
  const [params] = useSearchParams()
  const article_id = params.get('id')
  const [articleDetail, setArticleDetail] = useState<Api.Article.GetArticleDetailRes | null>(null)
  const navigate = useNavigate()
  const back = () => {
    navigate(-1)
  }
  useEffect(() => {
    console.log(article_id)
    const fetchDetail = async () => {
      const res = await articleGetArticleDetailService({article_id: article_id!})
      setArticleDetail(res.data.data)
    }
    fetchDetail()
  },[])
  return (
    <>
    <NavBar onBack={back}>{articleDetail?.title}</NavBar>
    <div dangerouslySetInnerHTML={{
      __html:articleDetail?.content || ''
    }}></div></>
  )
}
export default Detail